import React from 'react';
import {StyleSheet, Text, View,} from 'react-native';
import ListItem from './ListItem';

export default class List extends React.Component {
  static Item = ListItem;

  render() {
    const {
      children,
      style,
      renderHeader,
      renderFooter,
      ...restProps,
    } = this.props;

    let headerDom = null;
    let footerDom = null;
    if (renderHeader) {
      let content = typeof renderHeader === 'function' ? renderHeader() : renderHeader;
      if (typeof content === 'string') {
        content = <Text style={styles.Header}>{content}</Text>
      }
      headerDom = <View>{content}</View>;
    }

    if (renderFooter) {
      let content =
        typeof renderFooter === 'function' ? renderFooter() : renderFooter;
      if (typeof content === 'string') {
        content = <Text style={styles.Footer}>{content}</Text>;
      }
      footerDom = <View>{content}</View>;
    }

    return (
      <View {...restProps } style={style}>
        {headerDom}
        <View style={styles.Body}>
          {children ? children : null}
          <View style={[styles.BodyBottomLine ]} />
        </View>
        {footerDom}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  Header: {
    fontSize: 14,
    color:'#888888',
    paddingHorizontal: 15,
    paddingTop: 15,
    paddingBottom: 9,
    backgroundColor: '#f5f5f9',
  },

  Footer: {
    fontSize: 14,
    color:'#888888',
    paddingHorizontal: 15,
    backgroundColor: '#f5f5f9',
  },
  Body: {
    backgroundColor:'#888888',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: '#dddddd',
  },
  BodyBottomLine: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 1,
    backgroundColor: '#ffffff',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#dddddd',
  },
})
